<template>
  <div class="uploadimg">
    <el-upload
      :action="actionUrl"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :http-request="uploadFile"
      :limit="1"
      accept=".txt"
      list-type="picture">
      <el-button plain type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">从txt中批量导入,需要英文逗号离开</div>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  /* eslint-disable vue/require-prop-types */
  props: ['imgLogoUrl', 'status'],
  data() {
    return {
      actionUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      uploadDisabled: false,
      fileList: []
    }
  },
  beforeMount() {
    if (this.status !== 1) {
      this.getImg(this.videoId)
    }
  },
  created() {
    this.fileList = []
    this.initUploadFileurl()
  },
  methods: {
    initUploadFileurl() {
      this.actionUrl = process.env.BASE_API + 'v1/sensitiveWord/uploadTxt'
    },
    getImg(params) {
      const obj = {}
      obj.url = this.imgLogoUrl
      this.fileList.push(obj)
    },
    uploadFile(content) {
      console.log('内容：')
      console.log(content)
      const fd = new FormData()
      fd.append('file', content.file)

      const loading = this.$loading({
        lock: true,
        text: '保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      axios({
        url: content.action,
        method: 'post',
        // filePath: fd,
        headers: {
          'Content-Type': 'multipart/form-data'
        }, // this is important !
        contentType: false,
        processData: false,
        // name: 'files',
        data: fd,
        params: fd

      }).then(res => {
        loading.close()

        console.log('上传成功的响应', JSON.stringify(res))
        if (res.data.code === 1) {
          this.$message({
            message: '上传成功',
            type: 'success'
          })
          console.log(res.data.data)
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
      }).catch(err => {
        console.error(err)
        this.$message.error('上传txt失败')
      })
    },
    incrementTotal() {
      console.log('需要发送的数据：', this.fileList)
      this.$emit('emitSuccess', this.fileList)
    },
    handleRemove(file, fileList) {
      var _this = this
      this.fileList.forEach(function(item, index) {
        if (file.uid === item.uid) {
          _this.fileList.splice(index, 1)
        }
      })
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed(files, fileList) {
      this.$message({
        message: '最多只能上传一个txt文件',
        type: 'warning'
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss">
	.uploadimg{
		overflow: hidden;
		clear: both;
  }
</style>
